<template>
	<div class="address">
		<!-- 顶部 -->
		<van-nav-bar
			title="地址"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		/>
		<!-- 地址 -->
		<van-address-list
			v-model="chosenAddressId"
			:list="list"
			default-tag-text="默认"
			:add-button-text="text"
			@add="onAdd"
			@edit="onEdit"
		/>
		<!-- 编辑地址 -->
		<div v-show="appear">
			<van-address-edit
				:area-list="areaList"
				show-delete
				show-set-default
				show-search-result
				:search-result="searchResult"
				:area-columns-placeholder="['请选择', '请选择', '请选择']"
				@save="onSave"
				@delete="onDelete"
				@change-detail="onChangeDetail"
			/>
		</div>
	</div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { Toast } from "vant";

export default {
	data() {
		return {
      content:"",
			text: "新增地址",
			appear: "",
			areaList,
			searchResult: [],
			chosenAddressId: "1",
			list: [
				{
					id: "1",
					name: "张三",
					tel: "13000000000",
					address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
					isDefault: true,
				},
				{
					id: "2",
					name: "李四",
					tel: "1310000000",
					address: "浙江省杭州市拱墅区莫干山路 50 号",
				},
			],
		};
	},
	methods: {
		//退回
		onClickLeft() {
			this.$router.go(-1);
		},
		onAdd() {
			if (this.appear == "") {
				this.appear = "1";
				this.text = "返回";
			} else {
				this.appear = "";
				this.text = "新增地址";
			}
		},
		onEdit(item, index) {
			this.onAdd();
			console.log(item.address);
			console.log(item.id);
			console.log(item.address);
			console.log(index);
		},
		//地址
		onSave() {
			Toast("save");
      console.log(this.content);
		},
		onDelete() {
			Toast("delete");
		},
		onChangeDetail(val) {
			if (val) {
				this.searchResult = [
					{
						name: "黄龙万科中心",
						address: "杭州市西湖区",
					},
				];
			} else {
				this.searchResult = [];
			}
		},
	},
};
</script>

<style lang="scss">
.van-address-list {
	height: auto;
}
.van-address-edit {
	width: 94vw;
	position: fixed;
	top: 60px;
	background-color: indigo;
}
</style>
